import React, {Component} from 'react'
import PropTypes from 'prop-types';
import routerModule from "@greens/onion/src/router";
import {Image, Text, TouchableWithoutFeedback, View,StyleSheet} from 'react-native';
import uiModule from "@greens/onion/src/ui";
import Device from "@greens/device/src/device";

export default class NavigationBar extends Component {


	static defaultProps = {
		hiddenLeft: false,
		backgroundColor: 'white'
	};

	componentDidMount(){
		uiModule.setBarStyle(0,this.props.backgroundColor);
	}

	render() {
		const {backgroundColor, title, titleColor, titleSize, titleStyle, titleClick, hiddenLeft, leftText, leftTextColor, leftComponent, leftClick, rightComponent} = this.props;
		const leftOnClick = leftClick ? leftClick : () => routerModule.goBack();

		return (
			<View
				style={[styles.navigationBar, {backgroundColor: backgroundColor}]}>
				<View
					style={styles.navBox}>
					{leftComponent ? leftComponent :
						hiddenLeft ? null :
							<TouchableWithoutFeedback onPress={leftOnClick}>
								<View style={styles.iconWidth}>
									<Image style={styles.leftImage} source={require('./arrow_left.png')}/>
									<Text
										style={[styles.leftText, leftTextColor ? {color: leftTextColor} : null]}>{leftText ? leftText : '返回'}</Text>
								</View>
							</TouchableWithoutFeedback>}
					{title ?
						<Text
							style={[styles.navText, titleColor ? {color: titleColor} : null, titleSize ? {fontSize: titleSize} : null, titleStyle ? titleStyle : null]}
							onPress={titleClick}
							numberOfLines={1}
						>{title}</Text> : null
					}
					<View style={styles.rightBtnBg}>
						{rightComponent ? rightComponent : null}
					</View>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	navigationBar: {
		paddingTop:Device.STATUS_BAR_HEIGHT,
		borderBottomWidth: 1,
		borderBottomColor: '#eeeeee',
		width: '100%'
	},
	navBox: {
		height: 45,
		left: 0,
		right: 0,
		position: 'relative',
		top: 0,
		padding: 10,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	iconWidth: {
		position: 'absolute',
		left: 12,
		bottom: 0,
		height: 45,
		alignItems: 'center',
		flexDirection: 'row',
		zIndex: 5,
		justifyContent: 'center',
	},
	leftImage: {
		height: 16,
		width: 9
	},
	leftText: {
		color: "#333",
		fontSize: 14,
		marginLeft: 5
	},
	navText: {
		fontSize: 17,
		color: '#000',
		paddingHorizontal: 55,
		alignItems: 'center',
		textAlign: 'center',
		flex: 1,
	},
	rightBtnBg: {
		position: 'absolute',
		height: 45,
		right: 10,
		top: 0,
		justifyContent: 'flex-end',
		alignItems: 'center',
		zIndex: 5,
		flexDirection: 'row'
	},
});
NavigationBar.propTypes = {

	backgroundColor: PropTypes.string,

	title: PropTypes.string.isRequired,
	titleColor: PropTypes.string,
	titleSize: PropTypes.number,
	titleStyle: Text.propTypes.style,
	titleClick: PropTypes.func,

	hiddenLeft: PropTypes.bool,
	leftText: PropTypes.string,
	leftTextColor: PropTypes.string,
	leftComponent: PropTypes.element,
	leftClick: PropTypes.func,

	rightComponent: PropTypes.element,
};
